<template>
  <div class="base-page">
    <CommonCustomNavHead title="清心守护" theme="dark" :isTab="true" prePage="/pages/index/main" />
    <view class="container">
      <!-- 应用名称和图标 -->
      <view class="app-info">
        <image class="app-icon" src="https://www.thuguardian.com/files/small_program/logo-font.png"></image>
      </view>
      
      <!-- 登录按钮 -->
      <view class="login-buttons">
        <!-- <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"  class="btn-phone-login">手机号一键登录</button> -->
        <button class="btn-code-login" @click="handlePhoneLogin">手机验证码登录</button>
      </view>
      
      <!-- 用户协议提示 -->
      <view class="agreement" @click="handleRadioClick">
        <van-radio class="agreement-radio" checked-color="#00AFCB" :value="radio"  :name="true"></van-radio>
        <div class="agreement-text">
          <span style="color: rgba(0, 0, 0, 0.65);">我已阅读并同意</span>
          <span class="link" @click="handleAgreement('service')">《清心守护小程序用户服务协议》</span>
          <span class="link" @click="handleAgreement('privacy')">《清心守护小程序隐私政策》</span>
        </div>
      </view>
      
      <!-- 自动创建账号提示 -->
      <view class="auto-create">
        <text class="auto-create-text">若您没有账号，登录后会自动创建</text>
      </view>
    </view>

    <!-- 协议弹窗 -->
    <AgreementDialog ref="agreeDialogRef" :dataList="agreementObj"></AgreementDialog>
  </div>
</template>

<script>
import CommonCustomNavHead from '@/components/CommonCustomNavHead/index.vue';
import { getToken, getUserphonenumber, quickLogin } from '@/api/common/index.js'
import AgreementDialog from './components/agreement-dialog.vue'

export default {
  name: 'login',
  components: {
    CommonCustomNavHead,
    AgreementDialog
  },
  data() {
    return {
      radio: false,
      service: {
        title: '清心守护用户服务协议',
        content: [
          {
            id: 1,
            title: '一、用户协议总则',
            content: [
              '1、本协议双方为清心守护（以下简称"运营方"）和 清心守护（包括小程序等产品提供的服务，以下简称"产品和服务"）的注册用户（以下简称"用户"）。',
              '2、用户在注册前请仔细阅读本协议的条款，并按照页面上的提示完成全部注册程序。',
              '3、用户在进行注册过程中点击“同意”按钮，即表示用户已充分知悉和完全接受本协议项下全部条款，进而与运营方达成本协议。',
              '4、运营方有权不时对本协议项下相关规则作出修改或补充，并于网站公布。用户若继续使用即视为您接受修订后的本协议条款。'
            ]
          },
          {
            id: 2,
            title: '二、用户服务使用说明',
            content: [
              '1、用户在注册时应按照注册提示填写准确的 用户名、手机号码 等相关个人资料，符合完整、准确、真实的要求。',
              '2、用户一旦注册成功，便成为运营方合法的注册用户，将获得本网站的一个用户账号和相应密码。用户应对其账号安全负全部责任，并应对其用户名下所进行的所有行为和事件承担相应的法律责任。',
              '3、用户同意接受运营方通过或其他方式向用户发送有关商业信息。',
              '4、运营方不对用户所发布信息的删除或储存失败负责。',
              '5、运营方有判定用户的行为是否符合本网站服务条款要求的权利，如果用户违背了服务条款的规定，本网站有权对其用户所提供的网络服务进行中断或停止使用。',
              '6、运营方不提供账号删除服务，如果用户需要删除账号，请直接放弃使用即可。',
              '7、用户不得以任何非法目的或其它方式对运营方的个人用户账号进行转让、转借、倒卖、账号共享等行为（用户账号仅限由其本人使用）。',
            ]
          },
          {
            id: 3,
            title: '三、协议内容的变更和修订',
            content: [
              '1、运营方有权在必要时修改服务条款，修改后的协议可以在运营方上查看。',
              '2、用户如果不同意运营方所改动的内容，可自行停止使用本站网络服务。',
              '3、如果用户继续享用本站网络服务，则视为同意接受本网站服务条款的变动。',
              '4、运营方可随时根据实际情况中断或终止一项或多项网络服务而无需对任何用户或第三方承担任何责任，如用户对一项或多项网络服务的中断或终止有异议，可以行使如下权利：',
              '（1）自行停止使用运营方的网络服务。',
              '（2）通知运营方停止对该用户的服务。 结束用户服务后，用户使用网络服务的权利立即终止，从终止时起，用户没有权利再进行处理任何未完成的信息或服务，运营方也没有义务为其传送任何未处理的信息或未完成的服务给用户或任何第三方。'
            ]
          },
          {
            id: 4,
            title: '四、用户隐私保护',
            content: [
              '我们重视对你隐私的保护，你的个人隐私信息将根据《隐私政策》受到保护与规范，详情请参阅《隐私政策》。运营方将严格履行用户个人隐私保密义务，承诺不公开、编辑或透露用户个人信息，但以下特殊情况除外：',
              '1、经注册用户事先许可授权；',
              '2、遵守国家法律法规或配合相关政府部门的要求；',
              '3、遵从运营方合法服务程序；',
              '4、为维护社会公众利益以及运营方的合法权益所必须。'
            ]
          },
          {
            id: 5,
            title: '五、注册用户的权利与义务',
            content: [
              '1、注册用户在使用运营方产品和服务时，必须遵守中华人民共和国相关法律法规的规定，用户应同意将不会利用本服务进行任何违法或不正当的活动，否则用户将自行承担由此产生的一切法律责任。',
              '2、用户在账号使用过程中不得上载、展示、张贴、传播或以其它方式传送含有下列内容之一的信息：',
              '（1）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；',
              '（2）损害国家荣誉和利益的；',
              '（3）煽动民族仇恨、民族歧视、破坏民族团结的；',
              '（4）破坏国家宗教政策，宣扬邪教和封建迷信的；',
              '（5）散布谣言，扰乱社会秩序，破坏社会稳定的；',
              '（6）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；',
              '（7）侮辱或者诽谤他人，侵害他人合法权利的；',
              '（8）含有虚假、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、猥亵、或其它道德上令人反感的内容。',
              '3、不得为任何非法目的而使用网络服务系统。',
              '4、不得利用运营方产品和服务故意制作、传播计算机病毒等破坏性程序，或其他从事任何危害计算机信息网络安全的行为。',
              '5、若用户行为违反上述约定，运营方有权作出独立判断并立即取消用户的服务账号，用户应对自己网上的行为承担一切法律责任，运营方的系统记录有可能作为用户违反法律的证据提交给相关主管部门。',
              '6、用户应同意保障和维护运营方全体成员及其他用户的利益，如因违反本协议或违反有关的法律法规而给运营方或任何第三者造成损失，用户应承担因此产生的法律责任。',
            ]
          },
          {
            id: 6,
            title: '六、运营方网络服务内容的所有权',
            content: [
              '1、运营方定义的网络服务内容包括但不限于：老人健康测评问卷等。该等内容均受《著作权法》、《商标法》、《专利法》、《计算机软件保护条例》及其他相关法律法规的保护。',
              '2、未经运营方或其他有权第三方的事先许可授权，用户不得对包括但不限于：问卷等在内的任何内容进行转载、翻录、复制、发行、破解、信息网络传播或其他违反知识产权相关法律、法规的行为，否则所导致的一切民事、行政或刑事责任，由用户自行承担。',
            ]
          },
          {
            id: 7,
            title: '七、免责声明',
            content: [
              '1、用户同意承担使用运营方产品和服务所存在的一切风险以及因使用网络服务而产生的一切后果，运营方对用户不承担任何责任。',
              '2、运营方不担保服务一定能满足用户的要求，也不担保服务不会中断，亦对服务的及时性，安全性及可能发生的技术错误均不作任何担保。',
              '3、任何由于黑客攻击、计算机病毒侵入或发作、政府管制、硬件故障、不可抗力等非运营方故意或严重过失而造成的用户个人资料泄露、丢失、被盗用、被篡改或服务暂定或终止的，对用户可能造成的风险或损失，运营方不承担法律责任。',
            ]
          },
          {
            id: 8,
            title: '八、其他约定',
            content: [
              '1、用户同意因本平台服务产生的任何争议均适用中华人民共和国法律，相关争议任何一方可向运营方住所地人民法院提起诉讼解决。',
              '2、本协议中的标题仅为方便而设，不影响对于条款本身的解释。本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，其余条款仍应具有约束力。'
            ]
          },
          {
            id: 9,
            title: '九、联系我们',
            content: [
              '如果您对本协议或本服务有任何疑问、意见或建议，可通过以下方式与我们联系：',
              '发送电子邮件至：qingxinshouhu@163.com'
            ]
          }
        ]
      },
      privacy: {
        title: '清心守护隐私政策',
        content: [
          {
            id: 1,
            title: '引言',
            content: [
              '我们深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最小必要原则、确保安全原则、主体参与原则、公开透明原则等。同时，我们承诺将按业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。',
              '请在使用我们的产品或服务前，仔细阅读并了解本《隐私政策》。您使用或继续使用我们的服务，即意味着同意我们按照本《隐私政策》收集、使用、储存和科研分析您的相关信息。如对本《隐私政策》或相关事宜有任何疑问，请联系我们。',
            ]
          },
          {
            id: 2,
            title: '本政策将帮助您了解以下内容：',
            content: [
              '1.我们如何收集和使用您的个人信息',
              '2.我们如何保护您的个人信息',
              '3.您的权利',
              '4.您提供的敏感信息',
              '5.我们如何使用Cookies',
              '6.本政策如何更新',
              '7.如何联系我们',
            ]
          },
          {
            id: 3,
            title: '一、我们如何收集和使用您的个人信息',
            content: [
              '(一) 我们收集哪些个人信息',
              '1.您提供的信息',
              '（1） 登录：您需要提供手机号码用于接收短信验证码完成身份验证。若不提供手机号，将无法使用平台服务。',
              '（2）完善个人资料：需提供出姓名、性别、出生日期、所在地区街道等基本信息。',
              '2.您在使用服务过程中产生的信息',
              '（1）自动采集的技术信息：如IP地址、访问时间、方式及目录、返回状态码等。',
              '（2）每次点击、提交和浏览信息的行为记录。',
              '（3）老年人健康评估问卷：本着自愿的原则，您可进行问卷评估，评估过程会收集您个人的基本信息和健康基本状况。',
              '3.法律法规允许的情形',
              '（1）与履行法律法规规定的义务相关。',
              '（2）涉及国家安全、公共卫生或重大公共利益的情况。',
              '（3）刑事侦查、审判等必要情形。',
              '(二) 我们如何使用您的个人信息',
              '1.提供服务功能，如身份验证、安全防范、备份等。',
              '2.改进平台服务，为您提供个性化体验。',
              '3.根据合理、合法的用途使用您授权提供的信息。',
              '4.用于大学科研数据分析。',
              '(三) 委托处理、共享、转让、公开披露您的个人信息',
              '1.共享：仅在获得您明确同意或法律要求的情况下进行',
              '2.转让：仅限获得您的授权或符合法律要求的情况。',
              '3.公开披露：仅在获得您授权或因法律强制性要求下进行。',
            ]
          },
          {
            id: 4,
            title: '我们如何保护您的个人信息',
            content: [
              '我们采取符合业界标准的技术与组织措施保护您的个人信息，包括：',
              '1、使用加密技术保护用户敏感信息。',
              '2、通过国家网络安全等级保护的测评和第三方风险评估。',
              '3、尽量避免收集无关信息。',
              '如发生安全事件，我们将按照法律法规要求及时告知您并采取补救措施。'
            ]
          },
          {
            id: 5,
            title: '三、您的权利',
            content: [
              '(一) 访问、更正或删除您的个人信息',
              '您可以通过平台或客服访问、更正个人信息。如需删除信息，可提出请求，我们将在法律允许的范围内及时处理。',
              '(二) 改变授权范围',
              '您可以随时撤回对非必要信息的授权，但不影响撤回前基于授权的处理行为。',
              '(三) 注销账户',
              '您可通过客服或电子邮件提出账户注销申请，我们将在注销账户的同时删除您的个人信息。',
              '(四) 响应您的请求',
              '为保障安全，我们可能要求验证您的身份后再处理请求。但在某些法律规定的例外情况下，可能无法响应您的请求。'
            ]
          },
          {
            id: 6,
            title: '四、您提供的敏感信息',
            content: [
              '某些个人信息（如姓名、手机号等）属于敏感信息，将受到更严格保护。您需在使用服务时谨慎提供敏感信息。',
            ]
          },
          {
            id: 7,
            title: '五、我们如何使用Cookies',
            content: [
              '我们使用Cookies为您提供个性化体验，包括：',
              '1、记住您的身份，减少重复输入信息。',
              '2、分析您使用服务的情况以优化体验。',
              '3、您可通过浏览器设置管理Cookies，但可能影响服务体验。',
            ]
          },
          {
            id: 8,
            title: '如何联系我们',
            content: [
              '如有任何问题或建议，请通过邮箱联系我们。我们将在三十天内回复。如对处理结果不满意，您可向相关监管部门投诉或举报。'
            ]
          },
          {
            id: 9,
            title: '',
            content: [
              '注：重大变更包括但不限于服务模式、信息处理方式、共享对象等方面的变化。'
            ]
          }
        ]
      },
      agreementObj: {}
    }
  },
  methods: {
    handleAgreement(type) {
      if (type === 'service') {
        this.agreementObj = this.service
      } else {
        this.agreementObj = this.privacy
      }
      this.$refs.agreeDialogRef.show = true
    },
    async onGetPhoneNumber(e) {
      console.log(e, 123123213)

      const { code } = e.detail;

      const res = await getToken({
        grant_type: 'client_credential',
        appid: 'wx378be59cff2efba2',
        secret: '1484442024c892df254814b02f3fdb4c'
      })

      console.log(res, 22222222)

      const access_token = res.access_token

      // const openid = wx.getStorageSync('openid')

      console.log(res, 123332223)
      const res1 = await getUserphonenumber({
        access_token,
        code
      })

      this.mobile = res.data.phone_info.phoneNumber 

      console.log(res1, 22222)
      this.phoneLogin()
    },
    async phoneLogin() {
      const res = await quickLogin({
        mobile: this.mobile
      })
      wx.navigateTo({
        url: '/pages/phone-login/main'
      })
    },
    
    async handlePhoneLogin() {
      wx.navigateTo({
        url: '/pages/phone-login/main?radio=' + this.radio
      })
    },
    handleRadioClick() {
      this.radio = !this.radio
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url('https://www.thuguardian.com/files/small_program/bg03.png') no-repeat;
  background-size: 100% auto;
}

.time {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.app-name {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.app-icon {
  width: 100px;
  height: 142px;
}

.login-buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
}

.btn-phone-login {
  background-color: #01AFCB;
  color: white;
  width: 100%;
  border-radius: 48px;
  margin-bottom: 24px;
}

.btn-code-login {
  background-color: white;
  color: #00AFCB;
  width: 100%;
  border-radius: 48px;
  border: 1px solid #00AFCB;
}

.agreement {
  width: 100%;
  padding: 30px;
  display: flex;
  box-sizing: border-box;
}

.agreement-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.auto-create {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 60px;
}

.auto-create-text {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.link {
  color: #00AFCB;
  font-weight: 600;
}
</style>

<style lang="less">
.agreement-radio {
  .van-radio__icon-wrap {
    font-size: 16px;
    .van-radio__icon {
      font-size: 16px;
      border: 1px solid #00AFCB !important;
    }
  }
}
</style>